<template>
  <footer class="bg-gray-900 text-white py-12 full-width no-horizontal-scroll" role="contentinfo">
    <div class="content-container">
      <!-- 页脚导航区 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
        <!-- 公司信息 -->
        <div>
          <h4 class="text-xl font-bold mb-4">UNIGEAR</h4>
          <p class="text-gray-400 mb-4">为探索者打造最优质的户外装备</p>
          <div class="flex space-x-4">
            <a
              href="#"
              class="text-gray-400 hover:text-white transition-colors"
              aria-label="访问我们的Facebook页面"
            >
              <span class="text-xl" aria-hidden="true">📘</span>
            </a>
            <a
              href="#"
              class="text-gray-400 hover:text-white transition-colors"
              aria-label="访问我们的Instagram页面"
            >
              <span class="text-xl" aria-hidden="true">📷</span>
            </a>
            <a
              href="#"
              class="text-gray-400 hover:text-white transition-colors"
              aria-label="访问我们的Twitter页面"
            >
              <span class="text-xl" aria-hidden="true">📱</span>
            </a>
          </div>
        </div>

        <!-- 产品链接 -->
        <div>
          <h4 class="text-lg font-semibold mb-4">产品系列</h4>
          <ul class="space-y-2">
            <li>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">登山装备</a>
            </li>
            <li>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">露营用品</a>
            </li>
            <li>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">户外服装</a>
            </li>
            <li>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">旅行配件</a>
            </li>
          </ul>
        </div>

        <!-- 支持链接 -->
        <div>
          <h4 class="text-lg font-semibold mb-4">客户支持</h4>
          <ul class="space-y-2">
            <li>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a>
            </li>
            <li>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a>
            </li>
            <li>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">退换政策</a>
            </li>
            <li>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">产品保修</a>
            </li>
          </ul>
        </div>

        <!-- 订阅信息 -->
        <div>
          <h4 class="text-lg font-semibold mb-4">订阅最新消息</h4>
          <p class="text-gray-400 mb-4">获取最新产品信息和独家优惠</p>
          <div class="flex">
            <input
              type="email"
              placeholder="您的邮箱"
              class="bg-gray-800 text-white px-4 py-2 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500"
              aria-label="电子邮件订阅"
            />
            <button
              class="bg-blue-600 px-4 py-2 rounded-r hover:bg-blue-700 transition"
              aria-label="提交订阅"
            >
              订阅
            </button>
          </div>
        </div>
      </div>

      <!-- 分隔线 -->
      <div class="border-t border-gray-800 my-6"></div>

      <!-- 版权信息 -->
      <div class="flex flex-col md:flex-row justify-between items-center">
        <p class="text-gray-400 text-sm mb-4 md:mb-0">
          © {{ currentYear }} UNIGEAR. 保留所有权利。
        </p>
        <div class="flex space-x-6">
          <a href="#" class="text-gray-400 text-sm hover:text-white transition-colors">隐私政策</a>
          <a href="#" class="text-gray-400 text-sm hover:text-white transition-colors">服务条款</a>
          <a href="#" class="text-gray-400 text-sm hover:text-white transition-colors">网站地图</a>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { computed } from 'vue'

// 计算属性
const currentYear = computed(() => {
  return new Date().getFullYear()
})
</script>

<style scoped>
/* 页脚样式可以根据需要添加 */
</style>
